<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="{$NOW_THEME_URL}/Assets/Css/reset.css">
<script src="__PUBLIC__/Js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=61E7222b2e4ef33a4bea3e66c12049b5"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
<link rel="stylesheet" type="text/css" href="{$NOW_THEME_URL}/Assets/Css/module_form.css">

<script src="{$NOW_THEME_URL}/Assets/Js/jquery.min.js"></script>
<script src="{$NOW_THEME_URL}/Assets/Js/jquery.timer.js"></script>
<script src="{$NOW_THEME_URL}/Assets/Js/common.js"></script>
<title>设置地图标记</title>
<style type="text/css">
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;}
#allmap {width: 100%;height: 93%;overflow: hidden;}
#allmap .anchorTR .BMapLib_marker {display: block;}
#allmap .anchorTR .BMapLib_circle {
	display: none;
}
#allmap .anchorTR .BMapLib_polygon {
	display: none;
}
#allmap .anchorTR .BMapLib_polyline {
	display: none;
}
#allmap .BMapLib_rectangle{
	display:none; BMapLib_last
}
#allmap .BMap_cpyCtrl, .location .anchorBL {
	display: none;
}
.button{
	text-align:right;
	padding:2px 10px;
	color:#FFF;
}
.search{
	background-color:#339900;
	color:#FFF;
	padding:2px 5px;
	border:0px;
}
.search_dl{
	margin-top:10px;
	width:100%;
	height:30px;
	padding:10px;
}
.allmap{
	height:370px;
}
#confirm{
	float:right;
	margin-right:10px;
	color:#FFF;
}
.keywords{
	padding:5px;
	width:200px;
	border:#CCC 1px solid;
}
.sleft {
	width:40%;
	float:left;
}
.sright {
	width:40%;
	float:right;
}
.sright a {
	color:#FFF;
}
</style>
</head>
<body>
<div class="search_dl clearfix">
	<div class="sleft">
		<input type="text" name="keywords" id="suggestId" class="keywords" placeholder="请输入关键字搜索">
		<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
	</div>
	<div class="sright">
		<a class="btn form_ele_submit" id="confirm" data-toggle="modal">
			<i class="icon-map-marker"></i> &nbsp;确定标记
		</a>
	</div>
</div>
<input type="hidden" id="pointlng" name="pointlng" value=""/>
<input type="hidden" id="pointlat" name="pointlat" value=""/>
<input type="hidden" id="address"  name="address"  value="">
<div id="allmap" class="allmap" style="overflow:hidden;zoom:1;position:relative;">	
    <div id="map" style="height:55%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
    <div id="showPanelBtn" style="position:absolute;font-size:14px;top:50%;margin-top:-95px;margin-right:20px;right:20px;width:20px;padding:10px 10px;"></div>
</div>
</body>
<script type="text/javascript">
var api = frameElement.api, W = api.opener;
var map = new BMap.Map("allmap"); 

<empty name="row.longitude">
map.centerAndZoom(new BMap.Point(116.4035,39.915),17);
map.setCenter("{$address}");
map.setZoom(9);
<else />
var content = "<p>{$row.title}</p><p>{$row.address}</p>";	 
var point = new BMap.Point({$row.longitude},{$row.latitude});
var marker = new BMap.Marker(point);
var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象
map.centerAndZoom(point, 17);
map.addOverlay(marker);
marker.addEventListener("click", function(){          
   this.openInfoWindow(infoWindow);
});

</empty>

map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));  //右上角，仅包含平移和缩放按钮
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN}));  //左下角，仅包含平移按钮
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM}));  //右下角，仅包含缩放按钮
map.addEventListener("click", function(e){
	//$('#r-result').html(e.point.lng + ", " + e.point.lat);
	$('#pointlat').val(e.point.lat);//纬度
	$('#pointlng').val(e.point.lng);//经度
	
	//根据经纬度得到具体的位置
	var geoc = new BMap.Geocoder(); 
	map.addEventListener("click", function(e){        
		var pt = e.point;
		geoc.getLocation(pt, function(rs){
			var addComp = rs.addressComponents;
			$('#pointlng').val(e.point.lng);//经度
			//$('#address').val(addComp.city + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
			//console.log(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
		});        
	});
});
//map.enableScrollWheelZoom();
var overlays = [];
var overlaycomplete = function(e){
	clearAll();
    overlays.push(e.overlay);
};
var drawingManager = new BMapLib.DrawingManager(map, {
    isOpen: false, //是否开启绘制模式
    enableDrawingTool: true, //是否显示工具栏
    drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        offset: new BMap.Size(35, 20),
        scale: 0.8 
    }
});
drawingManager.addEventListener('overlaycomplete', overlaycomplete);

function clearAll() {
    for(var i = 0; i < overlays.length; i++){
        map.removeOverlay(overlays[i]);
    }
    overlays.length = 0
}
jQuery(document).ready(function() {
	$('#confirm').bind("click",function(){
		var obj = api.get('Custom_address');
		var pointlng = $('#pointlng').val();
		var pointlat = $('#pointlat').val();
		var address  = $('#address').val();
		
		$.get("{:U('Custom/outletLbs')}",{pointlng:pointlng,pointlat:pointlat},function(data){
			if(data){
				obj.document.getElementById('pointlng').value = pointlng;
				obj.document.getElementById('pointlat').value = pointlat;
				obj.document.getElementById('address').value  = data;
				frameApi.close(); //关闭当前窗口
			}else{
				alert('地址信息获取有误，请重新标注信息点');
			}
		});
	});
});

//百度地图API功能
function G(id) {
    return document.getElementById(id);
}
//建立一个自动完成的对象
var ac = new BMap.Autocomplete(    
    {"input" : "suggestId"
    ,"location" : map
});

//鼠标放在下拉列表上的事件
ac.addEventListener("onhighlight", function(e) {  
	var str = "";
	    var _value = e.fromitem.value;
	    var value  = "";
	    if (e.fromitem.index > -1) {
	        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	    }    
	    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
	    
	    value = "";
	    if (e.toitem.index > -1) {
	        _value = e.toitem.value;
	        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	    }    
	    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
	    G("searchResultPanel").innerHTML = str;
	});
	
//鼠标点击下拉列表后的事件	
var myValue;
ac.addEventListener("onconfirm", function(e) {    
var _value = e.item.value;
    myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
    
    setPlace();
});

//清除地图上所有覆盖物
function setPlace(){
    //map.clearOverlays();    
    function myFun(){
        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
        map.centerAndZoom(pp, 18);
        //map.addOverlay(new BMap.Marker(pp));    //添加标注
    }
    var local = new BMap.LocalSearch(map, { //智能搜索
      onSearchComplete: myFun
    });
    local.search(myValue);
}
</script>
</html>
